<script setup lang="ts">
import {onMounted, ref, watchEffect} from "vue";
import {useRoute} from "vue-router";
import myAxios from "../plugins/myAxios.ts";
import {showSuccessToast, showFailToast} from "vant";
import UserCardList from "../components/UserCardList.vue";
import {userType} from "../models/user";

const route = useRoute()
const {tags} = route.query;

// const mockUser = {
//   id: 123,
//   username: '小瑶今天不开心',
//   userAccount: 'missY',
//   avatarUrl: 'https://tupian.qqw21.com/article/UploadPic/2020-9/20209112265667154.jpg',
//   gender: '女',
//   phone: '123456',
//   email: '46546546@qq.com',
//   userCode: '1545',
//   createTime: new Date(),
//   tags: ['java', 'emo', '打工中', 'emo', '打工中'],
//   profile: '不用说再见，总会有遗憾，感谢相遇。。。',
// }

const userList = ref([]);
const isMatchMode = ref<boolean>(false)
const loading = ref()

const loadData = async () => {
  let userListData;
  loading.value = true;
  // 心动模式 根据标签匹配用户
  if (isMatchMode.value) {
    const num = 10;
    userListData = await myAxios.get('/user/match', {
      params: {
        num
      },
    })
        .then((response) => {
          console.log('/user/match succeed', response);
          showSuccessToast('加载成功');
          return response?.data?.records;
        })
        .catch((error) => {
          console.log('/user/match error', error);
          showFailToast('加载失败。请刷新重试');
        })
  } else {
    // 普通模式 分页查询用户
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1
      },
    }).then((response) => {
      console.log('/user/recommend succeed', response);
      showSuccessToast('加载成功');
      return response?.data?.records;
    })
        .catch((error) => {
          console.log('/user/recommend error', error);
          showFailToast('加载失败。请刷新重试');
        })
  }
  if (userListData) {
    userListData.forEach((user: userType) => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags);
      }
    })
    userList.value = userListData;
  }
  loading.value = false;
}

watchEffect(() => {
  loadData()
})
</script>

<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode" size="24"/>
    </template>
  </van-cell>
  <user-card-list :user-list="userList" :loading="loading"/>
  <van-empty v-if="!userList || userList.length < 1" description="数据为空"/>
</template>

<style scoped>

</style>